<template>
  <view class="uni-padding-wrap uni-common-mt join need_scroll_top_view" :style="{backgroundImage: 'url(' + $store.state.imgBaseUrl + '/join/join-bg.png)'}">
    <view class="common-tab">
      <!-- <view class="common-tab-text" :class="{active: rank == 2}" @click="changeTab(2)">实体商户</view> -->
      <view class="common-tab-text" :class="{active: rank == 4}" @click="changeTab(4)">大掌柜</view>
      <view class="common-tab-text" :class="{active: rank == 3}" @click="changeTab(3)">合伙人商户</view>
    </view>
    <view class="join-box" :style="{backgroundImage: 'url(' + $store.state.imgBaseUrl + '/join/join-bg2.png)'}">
      <view class="join-box-img" :style="{backgroundImage: 'url(' + $store.state.imgBaseUrl + '/join/join-' + rank + '.png)' }"></view>
    </view>
    <view class="join-icon-box">
      <block v-for="(item, index) in iconImg1" :key="index">
        <view class="box-con" @click="openDetailPop(index)">
          <image :src="item.img"></image>
          <view class="text1">{{item.text}}</view>
        </view>
      </block>
    </view>
    <view class="footer">
      <view class="btn btn1" @click="openPop('person')">个人申请</view>
      <!-- <view class="btn btn2" @click="openPop('enterprise')">企业申请</view> -->
    </view>
    <!-- 关联人弹窗 -->
    <uni-popup class="join-pop" ref="popup" type="center" :maskClick="true" :show="false">
      <view class="pop-box">
        <view class="pop-box-top">
          <text>邀请人</text>
          <view class="close" @click="closePop('popup')">
            <image :src="$store.state.imgBaseUrl + '/goodDetail/close.png'"></image>
          </view>
        </view>
        <view class="pop-box-cont">
          <view class="inpt-list">
            <view class="label">姓名</view>
            <view class="inpt"><input type="text" v-model="inviteInfo.name" placeholder="请填写关联人姓名" disabled></view>
          </view>
          <view class="inpt-list">
            <view class="label">电话</view>
            <view class="inpt"><input type="number" v-model="inviteInfo.phone" maxlength="11" placeholder="请填写关联人电话" disabled></view>
          </view>
          <view class="inpt-list">
            <view class="label">等级</view>
            <view class="inpt"><input type="text" v-model="inviteInfo.grade" placeholder="请填写关联人等级" disabled></view> 
          </view>
        </view>
        <view class="hint-text">{{hintText}}</view>
        <view class="pop-box-footer">
          <button type="primary" class="sub-btn yellow" @click="changePhone">修改手机号</button>
          <button type="primary" class="sub-btn" @click="gotoPage">确认</button>
        </view>
      </view>
    </uni-popup>
    <uni-popup class="join-pop" ref="changePhonePop" type="center" :maskClick="false" :show="false">
      <view class="pop-box">
        <view class="pop-box-top">
          <text>修改邀请人</text>
          <view class="close" @click="closePop('changePhonePop')">
            <image :src="$store.state.imgBaseUrl + '/goodDetail/close.png'"></image>
          </view>
        </view>
        <view class="pop-box-cont">
          <view class="inpt-list none">
            <view class="label">姓名</view>
            <view class="inpt"><input type="text" v-model="inviteInfo.name" placeholder="请填写邀请人姓名" disabled></view>
          </view>
          <view class="inpt-list">
            <view class="label">电话</view>
            <view class="inpt"><input type="number" v-model="phone" @blur="backFixationTop()" maxlength="11" placeholder="请填写邀请人电话"></view>
          </view>
          <view class="inpt-list none">
            <view class="label">等级</view>
            <view class="inpt"><input type="text" v-model="inviteInfo.grade" placeholder="请填写邀请人等级" disabled></view> 
          </view>
        </view>
        <view class="hint-text">请填写手机号可展示关联人信息进行确认</view>
        <view class="pop-box-footer">
          <button type="primary" class="sub-btn sub2" @click="sureChanePhone">确认</button>
        </view>
      </view>
    </uni-popup>
    <view>
      <uni-fab
        :pattern="pattern"
        :content="content"
        :horizontal="horizontal"
        :direction="direction"
        @trigger="trigger"
      ></uni-fab>
    </view>
    <!-- 权益详情  begin-->
    <view class="detail-box" v-if="detailFlag" @click="detailFlag=false">
      <swiper class="swiper" :interval="3000" :duration="1000" :current="curSwiperIndex" @change="getCurSwiperIndex" previous-margin="52rpx" next-margin="52rpx">
        <swiper-item v-for="(item, index) in swiperList" :key="item.id" >
          <view class="detail-box-item" :class="{bigItem: curSwiperIndex == index}" :style="{backgroundImage: 'url(' + bgTopImage +')'}">
            <view class="item-top-img" ></view>
            <view class="item-bot-img" :style="{backgroundImage: 'url(' + bgBotImage +')'}"></view>
            <view class="top-icon"><image :src="$store.state.imgBaseUrl + item.topIcom" mode=""></image></view>
            <view class="item-tit">{{item.tit}}</view>
            <view class="item-tab">
              <view class="box1"></view>
              <view class="box1"></view>
              <view class="text1">服务对象</view>
              <view class="box1"></view>
              <view class="box1"></view>
            </view>
            <view class="item-tab item-tab-cont">
              <view class="box2">
                <text class="text2"></text>
                <text>商户</text>
              </view>
              <view class="box2 box3">
                <text class="text2"></text>
                <text>合伙人商户</text>
              </view>
              <view class="box2">
                <text class="text2"></text>
                <text>大掌柜</text>
              </view>
            </view>
            <view class="item-tab item-tab2">
              <view class="box1"></view>
              <view class="box1"></view>
              <view class="text1">权益说明</view>
              <view class="box1"></view>
              <view class="box1"></view>
            </view>
            <view class="tab-list">
              <view class="list" v-for="(n, nindex) in item.explainList" :key="nindex">
                <text :class="{smallText: (item.id == 7 && nindex==1) || (item.id == 8 && nindex==3)}">{{n}}</text>
                <text class="smallText" v-if="item.id==5 && nindex==0">（自购省钱，分享还能赚钱）</text>
                <text class="smallText" v-if="item.id==5 && nindex==1">（平台提供各行各业都能适用的商品）</text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 权益详情  end-->
  </view>
</template>

<script>
import { logoutApi } from '@/service/user/user.service.js'
import uniPopup from '@/components/uni-popup/components/uni-popup/uni-popup.vue'
import {inviteInfo, checkInviteByMobile, bindingInvite, findResult } from "../../service/join/join.service.js"
import {getJoinStatus} from './common.js' // 获取审核结果的接口
import { scrollToTargetPosition } from '@/mixin/index.mixin.js'
import uniFab from '@/components/uni-fab/uni-fab.vue';
import { detailDatas } from '@/unit/common.data.js'
export default {
  mixins: [scrollToTargetPosition],
  data() {
    return {
      hintText: '请确认您的绑定关系,如若有误可点击修改',
      mobile: '',
      phone: '', // 修改的手机号
      type: null, // 加盟的类型 person=>个人申请  enterprise=>企业申请
      rank: 4,
      inviteInfo: { // 邀请人信息
        isShow: '',
        name: '',
        phone: '',
        grade: '',
        id: ''
      },
      iconImg1: [
        {id: 1, text: '低价采购', img: this.$store.state.imgBaseUrl + '/join/join-icon-1.png'},
        {id: 2, text: '引流管理', img: this.$store.state.imgBaseUrl + '/join/join-icon-2.png'},
        {id: 3, text: '营销工具', img: this.$store.state.imgBaseUrl + '/join/join-icon-3.png'},
        {id: 4, text: '专属客服', img: this.$store.state.imgBaseUrl + '/join/join-icon-4.png'},
        {id: 6, text: '超级权益', img: this.$store.state.imgBaseUrl + '/join/join-icon-5.png'},
        {id: 7, text: '营销案例', img: this.$store.state.imgBaseUrl + '/join/join-icon-6.png'},
        {id: 8, text: '商学院', img: this.$store.state.imgBaseUrl + '/join/join-icon-7.png'},
        {id: 9, text: '课程赠送', img: this.$store.state.imgBaseUrl + '/join/join-icon-8.png'}
      ],
      horizontal: 'right',
      direction: 'horizontal',
      pattern: {
        color: '#FFFFFF',
        backgroundColor: 'rgba(0,0,0,0.5)',
        selectedColor: '#007AFF',
        buttonColor:"#434343"
      },
      content: [
        {
          iconPath: '../../static/image/icon/loginout.png', // 图片路径
          text: '安全退出',
          active: false
        }
      ],
      swiperList: '',
      bgTopImage: this.$store.state.imgBaseUrl + '/join/top.png',
      bgBotImage: this.$store.state.imgBaseUrl + '/join/foot.png',
      detailFlag: false,
      curSwiperIndex: 0,
      source: ''
    };
  },
  components: {uniPopup, uniFab},
  mounted() {
    this.swiperList = detailDatas;
  },
  onLoad(option) {
    this.source = option.from;
  },
  onShow() {
    uni.removeStorageSync('joinInfo'); // 清除意外退出申请步骤存储的申请记录
    uni.removeStorageSync('recomposeDatas'); // 清除意外退出修改申请时存储的修改信息
    getJoinStatus((data)=>{ // 校验是否申请过加盟
      if (data != 'null' && data != 1 && data != 2 && data != 3) {
        uni.showToast({
          title: '已提交申请',
          icon: 'none',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/join/result'
              })
            }, 2000);
          }
        });
        return false
      }
      this.lookInviteInfo();
    });
  },
  methods: {
    getCurSwiperIndex(e) {
      this.curSwiperIndex = e.detail.current;
    },
    openDetailPop(index) {
      this.curSwiperIndex = index;
      this.detailFlag = true
    },
    trigger(e) {
      if (e.index == 0) {
        logoutApi({}, res => {
          if (res.status == 0) {
            uni.showToast({
              title: '登出成功！',
              success: () => {
                setTimeout(function () {
                  uni.clearStorageSync();
                 
                }, 2000);
              }
            })
          }
        }, null, {showErrorMsg: true});
      }
    },
    changeTab (t) {
      this.rank = t;
    },
    changePhone () {
      this.$refs.popup.close();
      this.$refs.changePhonePop.open();
    },
    sureChanePhone () {
      if (!this.phone) {
        uni.showToast({
          title: '请填写手机号',
          icon: 'none'
        });
        return false
      }
      this.getCheckInviteByMobile();
    },
    openPop (type) {
      this.type = type;
      let params = {
        mobile: this.mobile,
        rank: this.rank
      }
      uni.setStorage({
        key: 'joinInfo',
        data: params
      })
      if (this.inviteInfo.isShow) {
        this.$refs.popup.open()
      } else {
        if (!this.source) {
          uni.navigateTo({
            url: '/pages/join/identityAuthen?type=' + this.type
          })
        } else {// 财务审核失败时直接去打款凭证或者线上支付
          if (this.rank != 4) {
            uni.navigateTo({
              url: '/pages/join/joinEntrance?type=' + type + '&isId=1&isLic=1'
            })
          } else {
            uni.navigateTo({
              url: '/pages/join/updateCertificate?type=' + type
            })
          }
        }
      }
    },
    closePop (refs) {
      this.$refs[refs].close();
      if (refs == 'changePhonePop') {
        this.$refs.popup.open();
      }
    },
    gotoPage () {
      this.bind();
    },
    bind () {
      bindingInvite({id:this.inviteInfo.id}, (res) => { // 绑定邀请人
        if (res.status == 0) {
          uni.showToast({
            title: '绑定关联人成功',
            icon: 'none'
          });
          if (!this.source) {
            uni.navigateTo({
              url: '/pages/join/identityAuthen?type=' + this.type
            })
          } else {// 财务审核失败时直接去打款凭证或者线上支付
            uni.navigateTo({
              url: '/pages/join/joinEntrance?type=' + this.type + '&isId=1&isLic=1'
            })
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    getCheckInviteByMobile () {
      checkInviteByMobile({id: this.phone}, (res) => { // 校验邀请人
        if (res.status == 0) {
          this.inviteInfo.name = res.data.nickName;
          this.inviteInfo.phone = res.data.mobile;
          this.inviteInfo.grade = res.data.rankName;
          this.inviteInfo.id = res.data.userId;
          this.$refs.changePhonePop.close();
          this.$refs.popup.open();
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    lookInviteInfo () {
      inviteInfo({},(res) => {
        if(res.status == 0) {
          this.inviteInfo.isShow = res.data.inviteStatus;
          this.inviteInfo.name = res.data.nickName;
          this.inviteInfo.phone = res.data.mobile; 
          this.inviteInfo.grade = res.data.rankName;
          this.inviteInfo.id = res.data.userId;
          // this.mobile = res.data.mobile;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.join-icon-box {
  padding: 10rpx 62rpx 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .box-con {
    flex: 0 0 21%;
    text-align: center;
    margin-top: 60rpx;
    image {
      width: 104rpx;
      height: 104rpx;
    }
    .text1 {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(255,255,255,1)
    }
  }
}
image {
  width: 100%;
  height: 100%;
}
.join {
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-family: PingFang SC;
  position: relative;
  .common-tab {
    width: 70%;
    padding-top: 50rpx;
    margin: 0 auto 0;
    &-text {
      color: #F6DA99;
      font-size: 30rpx;
      font-weight: 500;
      opacity: 0.6;
      &.active {
        font-size: 42rpx;
        opacity: 1;
        &:after {
          content: '';
          background-color: #F6DA99;
          opacity:0.5;
          bottom: 2rpx;
        }
      }
    }
  }
  .join-box {
    width: 590rpx;
    height: 320rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 42rpx;
    position: relative;
    &-img {
      width: 267rpx;
      height: 113rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 103rpx;
      right: 139rpx;
    }
  }
  .footer {
    width: 100%;
    position: absolute;
    bottom: 38rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      // width: 270rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #FFFFFF;
      border-radius: 10rpx;
      font-size: 36rpx;
      &.btn2 {
        width: 687rpx;
        border: 1px solid rgba(225,225,225,1);
      }
      &.btn1 {
        width: 687rpx;
        background: linear-gradient(-63deg,rgba(167,143,113,1) 0%,rgba(233,202,163,1) 100%);
        // margin-left: 53rpx;
      }
    }
  }
}

.pop-box {
  width: 500rpx;
  &-top {
    font-size: 30rpx;
    color: #333333;
    font-weight:500;
    border-bottom: 1px solid #E1E1E1;
    text-align: center;
    padding: 12rpx 0 30rpx;
    position: relative;
    .close {
      width: 25rpx;
      height: 25rpx;
      position: absolute;
      right: 0;
      top: 0;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  &-cont {
    padding: 49rpx 0 28rpx;
    .inpt-list {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 27rpx;
      .label {
        font-size: 26rpx;
        color: #000000;
        font-weight:500;
        margin-right: 25rpx;
      }
      .inpt {
        width: 268rpx;
        height: 50rpx;
        border: 1px solid #E1E1E1;
        border-radius: 10rpx;
        input {
          height: 50rpx;
          font-size: 24rpx;
          color: #666666;
          text-indent: 20rpx;
        }
      }
      &.none {
        visibility: hidden;
      }
    }
  }
  .hint-text {
    font-size:24rpx;
    font-weight:500;
    color:rgba(67,67,67,1);
    text-align: center;
    margin-bottom: 16rpx;
  }
  &-footer {
    display: flex;
    justify-content: space-between;
    .sub-btn {
      width: 260rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: #F6DA99;
      font-size: 24rpx;
      background-color: #434343;
      border: none;
      &.yellow {
        width: 180rpx;
        background-color: #F6DA99;
        color: #434343;
      }
      &.sub2 {
        width: 100%;
      }
    }
  }
}

</style>
